﻿<%@ Page Title="jQuery UI Progressbar in ASP.NET WebForms" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Progressbar.aspx.cs" Inherits="jQuery.UI.Progressbar.Progressbar" %>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <button id="operation">Operation</button>
    <div id="progressbar" style="width:500px"></div>
</asp:Content>
<asp:Content ID="ScriptContent" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">
        $.updateProgressbar = function () {
            //Calling PageMethod for current progress
            PageMethods.OperationProgress(function (result) {
                //Updating progress
                $("#progressbar").progressbar('value', result.progress)
                //If operation is complete
                if (result.progress == 100) {
                    //Enable button
                    $("#operation").attr('disabled', '');
                }
                //If not
                else {
                    //Reset timer
                    setTimeout($.updateProgressbar, 500);
                }
            });
        };

        $(document).ready(function () {
            //Progressbar initialization
            $("#progressbar").progressbar({ value: 0 });
            //Button click event
            $("#operation").click(function (e) {
                e.preventDefault();
                //Disabling button
                $("#operation").attr('disabled', 'disabled');
                //Making sure that progress indicate 0
                $("#progressbar").progressbar('value', 0);
                //Call PageMethod which triggers long running operation
                PageMethods.Operation(function (result) {
                    if (result) {
                        //Updating progress
                        $("#progressbar").progressbar('value', result.progress)
                        //Setting the timer
                        setTimeout($.updateProgressbar, 500);
                    }
                });
            });
        });
    </script>
</asp:Content>
